<>
<template>
  <div>
    <Trend/>
    <YearPanel/>
  </div>
</template>
<script>
  import YearPanel from "@/views/ndx/components/YearPanel.vue"
  import Trend from "@/views/ndx/components/Trend.vue"
  export default {
    components: {YearPanel,Trend},
  }
</script>
<style  lang="stylus">
body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  margin: 0;
  padding: 24px;
  background: radial-gradient(circle at top left, #fbe9e7 0, transparent 55%),radial-gradient(circle at bottom right, #e3f2fd 0, transparent 55%),linear-gradient(135deg, #f5f5f5 0, #e9edf3 100%);
}
h1 {

  font-weight: 700;
  margin: 0 0 24px;
  letter-spacing: 1px;

  /* 让文字更柔和有层次 */
  text-shadow: 0 1px 3px rgba(0,0,0,0.08);

  /* 下划线用科技蓝渐变 */
  position: relative;
  display: inline-block;

  font-size: 28px;
  background: linear-gradient(90deg, #1e88e5, #26c6da, #42a5f5);
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: 1px;
}

h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 60%;
  height: 3px;
  border-radius: 2px;

  background: linear-gradient(90deg,
  rgba(33,150,243,0.95),
  rgba(0,188,212,0.8),
  rgba(0,0,0,0));
}
</style>